<template>
  <div class="home">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item
        ><span @click="home()" style="cursor: pointer;color: #000;"
          >首页</span
        ></el-breadcrumb-item
      >
      <el-breadcrumb-item>系统首页</el-breadcrumb-item>
      <el-breadcrumb-item>首页预览</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片展示 -->
    <div class="up">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="8" :lg="8">
          <div class="dome"  @click="gotouser()">
            <div class="left" style="background:#67c23a;">
              <img src="@/assets/images/user.png" alt="" />
            </div>
            <div class="right">
              <div>{{ alluser }}</div>
              <div>总会员数</div>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8">
          <div class="dome" @click="gotobook()">
            <div class="left" style="background:#00bcd4;">
              <img src="@/assets/images/shop.png" alt="" />
            </div>
            <div class="right">
              <div>{{ allshop }}</div>
              <div>总商品数量</div>
            </div>
          </div></el-col
        >
        <el-col :xs="24" :sm="12" :md="8" :lg="8">
          <div class="dome" @click="gotoorder()">
            <div class="left" style="background:#ff5722;">
              <img src="@/assets/images/order.png" alt="" />
            </div>
            <div class="right">
              <div>{{ allorder }}</div>
              <div>总订单量</div>
            </div>
          </div></el-col
        >
      </el-row>
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="8" :lg="8">
          <div class="dome" @click="gotonotpay()">
            <div class="left" style="background:#cddc39;">
              <img src="@/assets/images/order1.png" alt="" />
            </div>
            <div class="right">
              <div>{{ sum0 }}</div>
              <div>待付款订单量</div>
            </div>
          </div></el-col
        >
        <el-col :xs="24" :sm="12" :md="8" :lg="8">
          <div class="dome" @click="gotojrorder()">
            <div class="left" style="background:#009688;">
              <img src="@/assets/images/order1.png" alt="" />
            </div>
            <div class="right">
              <div>{{ jrorder }}</div>
              <div>今日订单量</div>
            </div>
          </div></el-col
        >
        <el-col :xs="24" :sm="12" :md="8" :lg="8">
          <div class="dome" @click="gotozrorder()">
            <div class="left" style="background:#9e9e9e;">
              <img src="@/assets/images/order1.png" alt="" />
            </div>
            <div class="right">
              <div>{{ zrorder }}</div>
              <div>昨日订单量</div>
            </div>
          </div></el-col
        >
      </el-row>
    </div>
    <!-- 图表展示 -->
    <div class="down">
      <div class="left">
        <div class="page-histogram-chart">
          <h5>吾顺二手书阶段性订单数量统计</h5>
          <ve-histogram :data="chartData"></ve-histogram>
        </div>
      </div>
      <div class="right">
        <div class="page-histogram-chart">
          <h5>吾顺二手书订单状态统计</h5>
          <ve-histogram :data="chartData1"></ve-histogram>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  inject: ["reload"],
  data() {
    return {
      alluser: "",
      allshop: "",
      allorder: "",
      notpayorder: "",
      zrorder: "",
      jrorder: "",
      chartData: {
        columns: ["订单状态", "订单数量"],
        rows: []
      },
      chartData1: {
        columns: ["订单状态", "订单数量"],
        rows: []
      },
      sum0: 0, //未付款订单数量
      sum1: 0, //待发货订单数量
      sum2: 0, //已发货订单数量
      sum3: 0, //待收货订单数量
      sum4: 0 //已完成订单数量
    };
  },
  mounted() {
    this.alluserinit();
    this.allshopinit();
    this.allorderinit();
    this.bnorderinit();
    this.byorderinit();
    this.bzorderinit();
    this.jrorderinit();
    this.zrorderinit();
  },
  methods: {
    home() {
      this.reload();
    },
    // 获取数据
    alluserinit() {
      this.$http.get("/selectuser").then(res => {
        this.alluser = res.data.length;
      });
    },
    allshopinit() {
      this.$http.get("/selectbooks").then(res => {
        this.allshop = res.data.length;
      });
    },
    allorderinit() {
      this.$http.get("/allorder").then(res => {
        // console.log(res);
        this.allorder = res.data.length;
        this.chartData.rows.push({
          订单状态: "总订单量",
          订单数量: res.data.length
        });
        for (let i = 0; i < res.data.length; i++) {
          if (res.data[i].state == 0) {
            this.sum0++;
          }
          if (res.data[i].state == 1) {
            this.sum1++;
          }
          if (res.data[i].state == 2) {
            this.sum2++;
          }
          if (res.data[i].state == 3) {
            this.sum3++;
          }
          if (res.data[i].state == 4) {
            this.sum4++;
          }
        }
        this.chartData1.rows.push({
          订单状态: "已完成",
          订单数量: this.sum4
        });
        this.chartData1.rows.push({
          订单状态: "待支付",
          订单数量: this.sum0
        });
        this.chartData1.rows.push({
          订单状态: "待发货付",
          订单数量: this.sum1
        });
        this.chartData1.rows.push({
          订单状态: "待收货",
          订单数量: this.sum2
        });
        this.chartData1.rows.push({
          订单状态: "待评价",
          订单数量: this.sum3
        });
        // console.log(this.sum0, this.sum1, this.sum2, this.sum3, this.sum4);
      });
    },
    jrorderinit() {
      this.$http.get("/jrorder").then(res => {
        this.jrorder = res.data.length;
        this.chartData.rows.push({
          订单状态: "今日订单量",
          订单数量: res.data.length
        });
      });
    },
    zrorderinit() {
      this.$http.get("/zrorder").then(res => {
        this.zrorder = res.data.length;
        this.chartData.rows.push({
          订单状态: "昨日订单量",
          订单数量: res.data.length
        });
      });
    },
    bzorderinit() {
      this.$http.get("/bzorder").then(res => {
        this.chartData.rows.push({
          订单状态: "本周订单量",
          订单数量: res.data.length
        });
      });
    },
    byorderinit() {
      this.$http.get("/byorder").then(res => {
        this.chartData.rows.push({
          订单状态: "本月订单量",
          订单数量: res.data.length
        });
      });
    },
    bnorderinit() {
      this.$http.get("/bnorder").then(res => {
        this.chartData.rows.push({
          订单状态: "本年订单量",
          订单数量: res.data.length
        });
      });
    },
    // 跳转
    gotouser(){
      this.$router.push({name: "user"})
    },
    gotobook(){
      this.$router.push({name: "product"})
    },
    gotoorder(){
      this.$router.push({name: "order"})
    },
    gotonotpay(){
      this.$router.push({name: "order"})
    },
    gotojrorder(){
      this.$router.push({name: "order"})
    },
    gotozrorder(){
      this.$router.push({name: "order"})
    },
  }
};
</script>
 
 <style lang="css" scoped>
.down {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-content: center;
  width: 100%;
  align-content: center;
  background: #fff;
}
.down .left {
  width: 50%;
}
.down .right {
  width: 50%;
}
.el-row {
  margin-bottom: 10px;
}
.dome {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-content: center;
  width: 100%;
  height: 120px;
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
}
.dome .left {
  width: 50%;
  height: 120px;
  background: rgb(174, 226, 210);
}
.dome .left img {
  width: 50px;
  height: 50px;
  margin-top: 35px;
}
.dome .right {
  width: 50%;
  height: 120px;
}
.dome .right div {
  height: 30px;
  line-height: 30px;
  font-size: 15px;
  color: #777;
}
.dome .right div:nth-child(1) {
  margin-top: 30px;
  font-size: 25px;
  color: #555;
}
</style>